<template>
  <div style="position: relative;"> 
    <mt-header fixed title="创建俱乐部">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div> 
    <div class="my-field" style="margin-top: 0;">
      <div class="my-field-img">
        <img src="@/assets/img/club.jpg" ref="head" />
        <mt-button type="primary" plain size="small" @click='uploadHead' style=" width: 30%; margin-top:10px; ">上传图片</mt-button> 
      </div>
    </div> 
    <mt-field label="俱乐部名称" placeholder="请输入俱乐部名称" v-model="name"></mt-field> 
    <div style="display: flex; margin: 20px 10px;"><mt-button style="flex:1;" type="primary">确定</mt-button></div>

    <input type="file" ref="file" @change='selPic' accept="image/*" style="display:none;">
  </div>
</template>

<script>
export default { 
  data () {
    return { 
      name:""
    }
  },
  mounted(){
    
  },
  methods:{
    selImg(e){
      this.$refs.head.src = e.target.src;
    },
    uploadHead(){
      this.$refs.file.click();
    },
    selPic(){
      var files = this.$refs.file.files[0];                  //获取文件信息
      var head = this.$refs.head; 
      if(files){ 
          var reader=new FileReader();                       //调用FileReader
          reader.onload=function(evt){                        //读取操作完成时触发。
            head.setAttribute('src',evt.target.result);    //将img标签的src绑定为DataURL
          }
          reader.readAsDataURL(files);                        //将文件读取为 DataURL(base64)
      }else{
        
      }
    }
  }
}
</script>
